<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学员信息</title>
  <link rel="stylesheet" href="vendor/bootstrap.css">
  <link rel="stylesheet" href="./vendor/toastr.css">
  <style>
    body {
      background-color: #f1f1f1;
    }
  </style>
</head>

<body class="p-3">
  <div class="d-flex p-3 justify-content-between bg-white">
    <h4>学员信息</h4>
    <button id="addStudent" class="btn btn-primary btn-sm" data-bs-toggle="modal"
      data-bs-target="#exampleModal">添加学员</button>
  </div>

  <table class="table mt-3 table-striped table-bordered">
    <thead class="bg-white">
      <tr>
        <th scope="col">ID</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">性别</th>
        <th scope="col">组号</th>
        <th scope="col">联系电话</th>
        <th scope="col">期望薪资</th>
        <th scope="col">实际薪资</th>
        <th scope="col">籍贯</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">录入新学员</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="studentForm">
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label">姓名</label>
              <div class="col-sm-10">
                <input class="form-control" name="name" placeholder="学员姓名">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label">年龄</label>
              <div class="col-sm-10">
                <input type="number" name="age" class="form-control" placeholder="学员年龄">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label">组号</label>
              <div class="col-sm-10">
                <select class="form-select" name="group">
                  <option selected>请选择组号</option>
                  <option value="1">1组</option>
                  <option value="2">2组</option>
                  <option value="3">3组</option>
                  <option value="4">4组</option>
                  <option value="5">5组</option>
                  <option value="6">6组</option>
                  <option value="7">7组</option>
                  <option value="8">8组</option>
                  <option value="9">9组</option>
                  <option value="10">10组</option>
                  <option value="11">11组</option>
                  <option value="12">12组</option>
                  <option value="13">13组</option>
                  <option value="14">14组</option>
                  <option value="15">15组</option>
                </select>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label pt-0">性别</label>
              <div class="col-sm-10">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="男">
                  <label class="form-check-label">男</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="女">
                  <label class="form-check-label">女</label>
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label">手机号</label>
              <div class="col-sm-10">
                <input class="form-control" placeholder="手机号" name="phone">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label">薪资</label>
              <div class="col-sm-10">
                <div class="row">
                  <div class="col-6">
                    <input class="form-control" placeholder="期望薪资" name="salary">
                  </div>
                  <div class="col-6">
                    <input class="form-control" placeholder="实际薪资" name="truesalary">
                  </div>
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label">籍贯</label>
              <div class="col-sm-10">
                <div class="row">
                  <div class="col-4">
                    <select class="form-select" id="province" name="province">
                      <option selected>--省--</option>
                    </select>
                  </div>
                  <div class="col-4">
                    <select class="form-select" id="city" name="city">
                      <option selected>--市--</option>
                    </select>
                  </div>
                  <div class="col-4">
                    <select class="form-select" id="county" name="county">
                      <option selected>--县--</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button id="saveBtn" type="button" class="btn btn-primary">确认添加</button>
          <button id="resetBtn" type="button" class="btn btn-secondary">重置</button>
        </div>
      </div>
    </div>
  </div>

  <script src="vendor/bootstrap.bundle.js"></script>
  <script src="vendor/axios.js"></script>
  <script src="vendor/jquery.js"></script>
  <script src="vendor/toastr.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/student.js"></script>
</body>

</html>